<template>
	<div>
		<h2>热门推荐</h2>
		<router-link tag = "div" class = "con border-bottom" v-for = "item of recommendList" :key = "item.id" :to = "'/detail/' + item.id">
			<img :src="item.imgUrl" :alt="item.title">
			<div class = "right">
				<h3>{{item.title}}</h3>
				<p class = "ellipsis">{{item.desc}}</p>
				<p><span>￥</span><em>54</em>起</p>
			</div>
		</router-link>
	</div>
</template>

<script>
	export default {
		name : 'remocommend',
		props : ["recommendList"],
		data () {
			return {
			}
		}
	}
</script>

<style scoped lang = "less">
	@import "~css/variable.less";
	h2 {
		height:.8rem;
		line-height:.8rem;
		margin-top:.1rem;
		padding-left:.2rem;
		background: #eee;
	}
	.con {
		padding:.2rem;
		position: relative;
		img {
			width:2rem;
			height:2rem;
			position: absolute;
			top:.2rem;
			left:.2rem;
		}
		.right {
			padding-left:2.2rem;
			h3 {
				font-size:.32rem;
				line-height: .8rem;
			}
			p {
				line-height: .6rem;
				&:nth-of-type(2){
					font-size:.24rem;
				}
				span {
					color:@priceColor;
				}
				em {
					font-size:.4rem;
					color:@priceColor;
					margin-right:.06rem;
				}
			}
		}
	}
</style>